<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2025-02-25 17:53:10
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-25 21:02:26
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\centerViews\dashboard\components\homeButtom\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">

  import { ref } from "vue"
  import Card from "../homeCard.vue"
  import PieChart from "./components/pieChart.vue"
  import { getStatisticDish, getStatisticSpu, getStatisticSku } from '@/api/newHome'
  // 为审核采购单
  const unPurchaseList = ref([])
  const count = ref(0)
  const buttomData = ref([{
    name: '菜品数据',
    id: 0,
    data: [],
    typeName: [],
    colorList: ['#EB5870', '#FFC840', '#FF8147', '#588AF4', '#CBD5E1'],
    path: '/dishmanagement'
  },
  {
    name: '食材SPU信息',
    id: 1,
    data: [],
    typeName: [],
    colorList: ['#FDB105', '#3FD8B9', '#196AFD', '#FB6869 ', '#CBD5E1'],

    path: '/spuInformation'
  },
  {
    name: '食材SKU信息',
    id: 2,
    data: [],
    typeName: [],
    colorList: ['#14B8A5', '#2697FF', '#77D500', '#FF6562', '#CBD5E1'],
    path: '/skuInformation'
  }])
  const piechart1 = ref(null)

  const getStatisticDishApi = async () => {
    let res = await getStatisticDish({})
    if (res.code == 2000) {
      buttomData.value[0].data = res.data
      buttomData.value[0].typeName = Object.values(res.data).map(item => item.name);
      setTimeout(() => {
        piechart1.value[0].initChart()
      })

    }
  }
  const getStatisticSpuApi = async () => {
    let res = await getStatisticSpu({})
    if (res.code == 2000) {
      buttomData.value[1].data = res.data
      buttomData.value[1].typeName = Object.values(res.data).map(item => item.name);
      setTimeout(() => {
        piechart1.value[1].initChart()
      })
    }
  }
  const getStatisticSkuApi = async () => {
    let res = await getStatisticSku({})
    if (res.code == 2000) {
      buttomData.value[2].data = res.data
      buttomData.value[2].typeName = Object.values(res.data).map(item => item.name);
      setTimeout(() => {
        piechart1.value[2].initChart()
      })
    }
  }
  onMounted(() => {
    getStatisticDishApi(), getStatisticSpuApi(), getStatisticSkuApi()
  })
</script>

<template>

  <div v-for="(item,index) in buttomData" :key="item.id" class="foodData">
    <Card :title="item.name" :path="item.path">
      <div class="mt-10" flex>
        <div>
          <PieChart ref="piechart1" :data="item.data" :typeName="item.typeName" :legendName="index==0 ? '道' : ''"
            :colorList="item.colorList">
          </PieChart>
        </div>
      </div>
    </Card>
  </div>



</template>

<style lang="scss" scoped>
  .foodData {
    flex: 1;
    height: 271px;
    background: #fff;
    padding: 24px;
    justify-content: space-between;
    margin-right: 24px;
    border-radius: 4px 4px 4px 4px;
  }

  .foodData:last-child {
    margin-right: 0;
  }
</style>